<style lang="less" rel="stylesheet/less" type="text/less">
.v-customer-banner-index {
  .ivu-table-column-center {
    padding: 5px 0;
  }
  .ivu-table-cell {
    padding-left: 10px;
    padding-right: 10px;
  }
  .info-banner {
    display: flex;
    justify-content: center;
    white-space: nowrap;
    padding: 5px 0;
  }
  .info-thumb {
    width: 120px;
    height: 120px;
    cursor: pointer;
    display: flex;
    align-items: center;
    img {
      width: 100%;
    }
  }
  .deleted,
  .hot,
  .new,
  .sale {
    cursor: pointer;
  }
}
</style>
<template>
	<div class="v-customer-banner-index">
		<Table
			:columns="columns"
			:data="appList"
			:height="tableHeight()"
			class="personal-scrollbar"
			stripe
		/>
	</div>
</template>
<script>
import { Button } from 'iview';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';
import showPictureMixin from 'src/views/mixins/showPictureMixin';

export default {
	name: 'Index',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		appList: {
			type: Array,
			default() {
				return [];
			},
		},
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('skin_test.nickname'),
					key: 'nick_name',
					align: 'center',
					render: (h, { row }) => <div>{
						row.nick_name ? row.nick_name : this.$t('common.none')
					}
					</div>,
				},
				{
					title: this.$t('skin_test.phone'),
					key: 'phone',
					align: 'center',
				},
				{
					title: this.$t('skin_test.gender'),
					key: 'sex',
					align: 'center',
					render: (h, { row }) => {
						if (row.sex === 0) {
							return (
								<div>{this.$t('common.unknown')}</div>
							);
						} else if (row.sex === 1) {
                            	return (
								<div>{this.$t('staff.male')}</div>
							);
						}
						return (
							<div>{this.$t('staff.female')}</div>
						);
					},
				},
				{
					title: this.$t('skin_test.avatar'),
					key: 'avatar',
					align: 'center',
					render: (h, { row }) => <div>{
						row.avatar ? <img src={row.avatar}
							alt={this.$t('common.none')}
							width="50%"
						/> : this.$t('common.none')
					}
					</div>,
				},
				{
					title: this.$t('material_management.created_at'),
					key: 'created_at',
					align: 'center',
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					render: (h, { row }) => (
						<div>
							<Button name="index_get_applist" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('look', row.id); }} type="primary">
								{ this.$t('common.skin_quality_test_record') }
							</Button>
						</div>
					),
				},
			],
		};
	},
};
</script>
